<template>
  <div class="parent">
    <!-- 真正的递归业务其实只有在 Parent 父评论组件中而已 -->
    <Parent
      v-if="parentData.parent"
      :parentData="parentData.parent"
    />
    <div class="top">
      <span class="nickname">{{ parentData.user.nickname }}</span>
      <span class="create_date">{{ parentData.create_date.slice(0,10) }}</span>
      <span
        class="reply"
        @click="replyHandle"
      >回复</span>
    </div>
    <div class="content">
      {{ parentData.content }}
    </div>
  </div>
</template>

<script>
/* 
递归组件3个必要步骤：
  1. 组件内必须设定 `name` 属性
  2. 用这个 `name` 属性作为标签，在组件自己的 `<template>` 里面渲染
  3. 为了避免死循环, 要用终止条件 `v-if`
*/
import Bus from "@/utils/Bus";
export default {
  name: "Parent",
  props: ["parentData"],
  methods: {
    replyHandle() {
      Bus.$emit("sendComment", this.parentData.id);
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  background-color: #ffffee;
  border: 1px solid #aeaeab;
  padding: 3px;
  .top {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    .nickname {
      font-size: 14px;
    }

    .create_date {
      flex: 1;
      font-size: 12px;
      color: #ccc;
      margin-left: 10px;
    }

    .reply {
      font-size: 13px;
      color: #999;
    }
  }

  .content {
    padding: 0 10px;
    line-height: 1.4;
  }
}
</style>